<template>
  <div>
    <Form
      v-if="eidtForm.roleId"
      name="eidtForm"
      ref="formEdit"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      @finish="onFinish"
    >
      <Card style="width: 100%" title="编辑角色">
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleName"
              label="角色名称"
              :initialValue="eidtForm.roleName"
            >
              <Input placeholder="请输入角色名称" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleSort"
              label="角色顺序"
              :initialValue="eidtForm.roleSort"
            >
              <InputNumber :min="0" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="remark"
              label="描述"
              :initialValue="eidtForm.remark"
            >
              <Input placeholder="请输入描述" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="status"
              label="状态"
              :initialValue="eidtForm.status"
            >
              <Switcher type="text" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12" :offset="5">
            <FormItem
              name="roleKey"
              label="权限字符"
              :initialValue="eidtForm.roleKey"
            >
              <Input placeholder="请输入权限字符" style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
      </Card>
      <Card style="width: 100%" title="请选择权限">
        <Row>
          <Col :span="12" :offset="9">
            <Tree
              checkable
              :treeData="treeData2"
              defaultExpandAll
              :expandedKeys="expandedKeys2"
              @expand="onExpand2"
              v-model="value2"
              @change="change2"
            />
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <FormItem :wrapperCol="24" style="text-align: center">
              <Button
                type="primary"
                size="md"
                style="width: 100px"
                @click="sumbitForm"
                >提交</Button
              >
              <Button
                style="margin-left: 20px; width: 100px"
                size="md"
                @click="resetForm"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Card>
    </Form>
  </div>
</template>

<script>
import {
  listRole,
  getRole,
  delRole,
  addRole,
  updateRole,
  dataScope,
  changeRoleStatus,
} from "@/api/system/role";
import {
  treeselect as menuTreeselect,
  roleMenuTreeselect,
  roleMenuTreeSelectUni,
} from "@/api/system/menu";
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      labelColW: {
        span: 4,
      },
      wrapperCol: {
        span: 12,
      },
      wrapperColW: {
        span: 18,
      },
      // 菜单列表
      menuOptions: [],
      eidtForm: {},
      treeData2: [],
    };
  },
  computed: {
    mockDataCom() {
      for (let i = 0; i < 10; i += 1) {
        const item = (name) => {
          return {
            key: `${name}-${i.toString()}`,
            title: `集团法务部${i}`,
          };
        };
        this.mockData.push(item("demo1"));
        return this.mockData;
      }
    },
  },
  created() {},
  mounted() {
    this.handleUpdate(this.$route.params.id);
    this.getRoleMenuTreeselect(this.$route.params.id);
  },
  methods: {
    resetForm() {
      // this.$refs.formEdit.reset();
      this.$router.push('roleManagement');
    },
    sumbitForm() {
      this.$refs.formEdit.submit();
    },
    /** 修改按钮操作 */
    handleUpdate(id) {
      //   this.reset();
      const roleId = id;
      //   const roleMenu = this.getRoleMenuTreeselect(roleId);
      getRole(roleId).then((response) => {
        this.eidtForm = response.data;
        console.log("form:", this.eidtForm);
        // this.$nextTick(() => {
        //   roleMenu.then(res => {
        //     let checkedKeys = res.checkedKeys
        //     checkedKeys.forEach((v) => {
        //         this.$nextTick(()=>{
        //             this.$refs.menu.setChecked(v, true ,false);
        //         })
        //     })
        //   });
        // });
      });
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTreeSelectUni(roleId).then((response) => {
        this.menuOptions = response.menus;
        return response;
      });
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
    updateModel(val) {
      console.log("change", val);
    },
    change2(value) {
      this.value2 = value;
    },
    onExpand2(expandedKeys) {
      this.expandedKeys2 = expandedKeys;
    },
    onFinish(values) {
      console.log("sbumit values", values);
    },
  },
};
</script>


